<template>
  <div class="basic_table" v-if="column.length > 0">
    <el-table
      v-loading="loading"
      border
      :columns="column"
      :data="tableData"
      :span-method="objectSpanMethod"
      @selection-change="handleSelectionChange"
      :row-class-name="({ row, rowIndex }) => (row.index = rowIndex)"
    >
      <!-- <el-table-column type="selection" fixed="left" width="55" v-if="checkbox" /> -->
      <el-table-column type="index" align="center" fixed min-width="80" v-if="showIndex" label="序号" />
      <!-- <el-table-column :prop="item.fieldCode" :label="item.customName + item.fieldCode" min-width="200px" v-for="item in data" :key="item.fieldCode"> -->
      <el-table-column
        :prop="item.fieldCode"
        :label="item.customName ? item.customName : item.fieldName"
        min-width="200px"
        v-for="item in data"
        :key="item.fieldCode"
      >
        <template v-slot:header="scope">
          <span class="table_head_th">{{ scope.column.label }} </span>
          <el-tooltip effect="light" v-if="scope.column?.rawColumnKey === 'scoringTypeCn'" placement="top">
            <template #content>当打分方式为自动打分且数据来源为绩效数据池时<br />需手动在数据映射池中导入指标结果</template>
            <i class="icon zcb zcbquestion" style="cursor: pointer"></i>
          </el-tooltip>
          <el-tooltip effect="light" v-if="scope.column?.rawColumnKey === 'numberEnd'" placement="top">
            <template #content>{{ `[特殊说明: 最后一行包含边界值，即<=]` }}</template>
            <i class="icon zcb zcbquestion" style="cursor: pointer;margin-top:5px"></i>
          </el-tooltip>
          <el-tooltip effect="light" v-if="scope.column?.rawColumnKey === 'countScore'" placement="top">
            <template #content>'得分=评分*指标权重*评分人权重'</template>
            <i class="icon zcb zcbquestion" style="cursor: pointer;margin-top:5px"></i>
          </el-tooltip>
        </template>
        <template v-slot="scope">
          <span v-if="item.lovTypeCode !== 'URL'">
            <slot :name="item.fieldCode" :scope="scope.row">
              {{ scope.row[item.fieldCode] ? scope.row[item.fieldCode] : '-' }}
            </slot>
          </span>
          <span v-else>
            <slot :name="item.fieldCode" :scope="scope.row">
              {{ scope.row[item.fieldCode] ? formatCustomName(scope.row, item.fieldCode) : '-' }}
            </slot>
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="210px" label="操作" v-if="actionBtnIsShow">
        <template v-slot="scope">
          <slot name="actionBtn" :scope="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <footer v-if="page">
      <slot name="total"></slot>
      <el-pagination
        :currentPage="page.current"
        :page-size="page.size"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
  </div>
</template>
    
    <script setup>
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
// import { useKeys } from '@/hooks/useKeys'
import { format } from 'echarts'
//值集视图回显处理
// let { getKeys } = useKeys()
let route = useRoute()
const props = defineProps({
  column: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  page: {
    type: Object,
    default: () => {}
  },
  checkbox: {
    type: Boolean,
    default: false
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  //  需要合并的列
  mergeFields: {
    type: Array,
    default: () => []
  },
  actionBtnIsShow: {
    type: Boolean,
    default: true
  }
})
const spanArrList = ref([]) // 合并集合
const mergeIndex = ref({}) // 用来记录需要合并后的下标
// 在渲染前过滤掉不展示的字段
const data = computed(() => {
  let flag = ''
  if (route.query.source == 'add') {
    flag = 'NEW_PAGE'
  } else if (route.query.source == 'edit') {
    flag = 'MODIFY_PAGE'
  } else if (route.query.source == 'change') {
    flag = 'CHANGE_PAGE'
  }
  return props.column.filter((item) => (String(item.displayPage).indexOf(String(flag)) > -1 ? true : false))
})
const emit = defineEmits(['change', 'selection-change'])
const formatCustomName = (item, fieldCode) => {
  // console.log(item)
  // let keyName = getKeys(fieldCode)
  // return item[fieldCode][keyName]
}
const handleSizeChange = (size) => {
  emit('change', {
    size,
    current: props.page.current
  })
}
const handleCurrentChange = (current) => {
  emit('change', {
    current,
    size: props.page.size
  })
}
const handleSelectionChange = (val) => {
  emit('selection-change', val)
}

// 表数据合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //  rowIndex 行号  columnIndex 列号码
  // 序号和列字段
  if (column.type == 'index' || props.mergeFields.includes(column.property) || column.label === '操作') {
    let _row = ''
    if (column.type == 'index') {
      _row = spanArrList.value[props.mergeFields[0]] && spanArrList.value[props.mergeFields[0]][rowIndex]
    } else if (column.label === '操作') {
      _row = spanArrList.value[props.mergeFields[0]] && spanArrList.value[props.mergeFields[0]][rowIndex]
    } else {
      _row = spanArrList.value[column.property] && spanArrList.value[column.property][rowIndex]
    }
    const _col = _row > 0 ? 1 : 0
    // rowspan和colspan都为0，则表示这一行不显示，[x, 1]则表示合并了多少行
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

const toMergeColumn = () => {
  spanArrList.value = []
  mergeIndex.value = {}
  props.mergeFields.map((key) => {
    spanArrList.value[key] = []
    let pos = 0
    for (let i = 0; i < props.tableData.length; i++) {
      if (i === 0) {
        spanArrList.value[key].push(1)
        pos = 0
        mergeIndex.value[i] = 1
      } else {
        // 判断当前元素与上一元素是否相同（订单行ID）--统一订单行信息下
        if (props.tableData[i][key] == props.tableData[i - 1][key] && props.tableData[i]['quotaTypeId'] == props.tableData[i - 1]['quotaTypeId']) {
          spanArrList.value[key][pos] += 1
          spanArrList.value[key].push(0)
          mergeIndex.value[i] = mergeIndex.value[i - 1]
        } else if (props.tableData[i][key] instanceof Array && props.tableData[i - 1][key] instanceof Array) {
          console.log(key)
          if (props.tableData[i]['mianId'] === props.tableData[i - 1]['mianId']) {
            spanArrList.value[key][pos] += 1
            spanArrList.value[key].push(0)
            mergeIndex.value[i] = mergeIndex.value[i - 1]
          } else {
            spanArrList.value[key].push(1)
            pos = i
            mergeIndex.value[i] = mergeIndex.value[i - 1] + 1
          }
        } else {
          spanArrList.value[key].push(1)
          pos = i
          mergeIndex.value[i] = mergeIndex.value[i - 1] + 1
        }
      }
    }
  })
  if (props.mergeFields.includes('name') && props.mergeFields.includes('quotaWeight')) {
    spanArrList.value['quotaWeight'] = spanArrList.value['name']
  }
}
defineExpose({ toMergeColumn })
</script>
    <style lang="scss" scoped>
.basic_table {
  margin-top: 8px;
}
footer {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
.bottom {
  margin-bottom: 8px;
}
</style>
    